<template>
  <el-container class="home-container">
    <!-- 背景图片 -->
    <img src="../assets/bgimg.jpg" alt="" class="pagebg">
    <!-- 头部区域 -->
    <el-header>
      <el-row class="nav_container">
        <el-col :md="15" :sm="13" :xs="24">
          <div class="avater_container">
            <img src="../assets/rv.jpg" alt="" class="avater_img">
            Hoongs的个人博客
          </div>
        </el-col>
        <el-col :md="9" :sm="11" :xs="24">
          <el-menu :default-active="activeIndex" mode="horizontal" router>
            <el-menu-item index="home">Home</el-menu-item>
            <el-menu-item index="list">List</el-menu-item>
            <el-menu-item index="setting">Setting</el-menu-item>
            <el-menu-item index="about">About</el-menu-item>
          </el-menu>
        </el-col>

      </el-row>
    </el-header>
    <!-- 主体区域 -->
    <el-main>
      <router-view></router-view>
    </el-main>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: 'home'
    }
  },
  methods: {
    handleSelect(key, keyPath) {
      window.sessionStorage.setItem('activePath', keyPath)
    }
  },
  mounted: function() {
    this.$router.push('/')
  },
  created() {}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.home-container {
  height: 100%;
  color: #fff;
}

.pagebg {
  position: fixed;
  z-index: -10;
}

.nav_container {
  max-width: 900px;
  margin: 0 auto;
}

.el-menu {
  background: rgba(0, 0, 0, 0) !important;
  border-bottom: 1px solid rgba(92, 92, 92, 0.5);

  .el-menu-item:hover {
    color: #fff !important;
    background-color: rgba(0, 0, 0, 0) !important;
  }

  .el-menu-item.is-active {
    color: #fff !important;
    background: rgba(0, 0, 0, 0) !important;
  }
}

.avater_container {
  display: flex;
  align-items: center;
  justify-items: center;
  height: 60px;
  line-height: 60px;
  align-content: center;
  color: #fff;
  border-bottom: 1px solid rgba(92, 92, 92, 0.5);

  .avater_img {
    height: 45px;
    width: 45px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 15px;
  }
}

el-main {
  overflow: scroll;
}

::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-thumb {
  width: 5px;
  background-color: rgba(92, 92, 92, 0.8);
}

@media screen and(max-width: 768px) {
  .el-header {
    margin-bottom: 60px;
  }
}
</style>
